<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .txy {
            width: 100%;
            height: 30px;
            background-color: #2b303b;
        }
        .img1 {
            margin-left: 200px;
            margin-top: 5px;
            float: left;
        }
        .u1 {
            list-style-type: none;
            margin-left: 800px;
        }
        .l1 {
            float: left;
            font-size: 12px;
            color: white;
            border-right:1px solid white ;
            height: 15px;
            line-height: 15px;
            margin:7px auto;
            padding:0px 5px;
        }
        .l1:nth-last-child(1) {
            border-right: none;
        }
        .zj {
            width: 100%;
            height: 500px;
            background-image: url(../day7-25/images/banner.png);
        }
        .zdh {
            width: 400px;
            height: 500px;
            
        }
        .u2{
            color: white;
            height: 460px;
            width: 200px;
            margin: auto;
            padding-top: 40px;
            list-style: none;
            background-color: #1b2a3f;
        }
        .l2{
            margin-left: 20px;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
        }
        .gt{
            float: right;
            font-weight: bold;
            margin-right: 20px;
        }
        .zj2 {
            width: 100%;
            height: 600px;
        }
        .m1 {
            text-align: left;
            border: 1px solid rgba(114, 112, 112, 0.5);
            border-radius: 15px;
            width: 950px;
            height: 250px;
            padding: 40px;
            margin-top: 20px;
            margin-left: 250px;
        }
        .img2 {
            float: right;
            width: 400px;
            height: 250px;
            margin-top: 5px;
            margin-left: 60px;
        }
        .m2 {
            float: left;
            width: 450px;
        }
        .h1,.h2 {
            margin-top: 20px;
            text-align: center;
            font-weight: 500;
        }
        .p1 {
            font-size: 12px;
            line-height: 25px;
            padding: 20px 0;
        }
        input {
            border: 2px solid #ffa809;
            width: 120px;
            display: block;
            height: 40px;
            color: black;
            background-color: white;
            font-weight: 500;
            font-size: 15px;
        }
       .h3 {
            width: 90px;
            height: 20px;
            line-height: 20px;
            font-size: 20px;
            font-weight: 500;
            text-decoration: underline;
            text-underline-offset: 8px;  
            text-underline-color: hsl(240, 3%, 73%);  
            text-decoration-thickness: 1px; 
       }
       .db {
            background-color: #2e3033;
            height: 250px;
       }
       .u3 {
            width: 800px;
            margin-left: 200px;
            height: 100px;
            list-style: none;
       }
       .l3 {
            float: left;
            width: 150px;
            font-size: 14px;
            color: white;
            margin-top:20px;
       }
       .l4 {
            font-size: 12px;
            color: rgba(253, 254, 255, 0.7);
            margin: 2px 0;
       }
       .u4 {
            margin-top: 10px;
            list-style: none;
       }
       .db2 {
            float: right;
            width: 150px;
            position: relative;
            right: 250px;
            bottom: 80px;
            font-size: 12px;
            color: rgba(253, 254, 255, 0.7);
            padding: 2px;
       }
       .in2 {
            background-color: #00a4ff;
            color: white;
            border: none;
            height: 30px;
            font-size: 12px;
            margin-top: 20px;
            width: 150px;
       }
    </style>
</head>
<body>
        <div class="txy">
            <img src="../day7-25/images/logo.png" class="img1">
            <ul class="u1">
                <li class="l1">最新活动</li>
                <li class="l1">产品</li>
                <li class="l1">解决方案</li>
                <li class="l1">定价</li>
                <li class="l1">文档</li>
                <li class="l1">企业中心</li>
                <li class="l1">云市场</li>
                <li class="l1">开发者支持</li>
                <li class="l1">合作与生态</li>
                <li class="l1">客户</li>
            </ul>
        </div>
        <div class="zj">
            <div class="zdh">
                <ul class="u2">
                    <li class="l2">云服务器 <span class="gt">&gt;</span></li>
                    <li class="l2">轻量应用服务器 <span class="gt">&gt;</span></li>
                    <li class="l2">域名注册 <span class="gt">&gt;</span></li>
                    <li class="l2">网站备案 <span class="gt">&gt;</span></li>
                    <li class="l2">对象存储 <span class="gt">&gt;</span></li>
                    <li class="l2">云硬盘 <span class="gt">&gt;</span></li>
                    <li class="l2">云数据库 <span class="gt">&gt;</span></li>
                    <li class="l2">云数据库 <span class="gt">&gt;</span></li>
                    <li class="l2">批量计算 <span class="gt">&gt;</span></li>
                    <li class="l2">容器服务 <span class="gt">&gt;</span></li>
                </ul>
            </div>
        </div>
        <div class="zj2">
            <h2 class="h1">云从业者培训及认证</h2>
            <h3 class="h2">好好学习，天天向上</h3>
            <div class="m1">
                <div class="m2">
                <h2 class="h3">在线课程</h2>
                <p class="p1">
                    本课程专为云计算初学者、学生、个人开发者打造，
                    购买云+校园任意套餐可免费观看课程视频本课程专为云计算
                    初学者、学生、个人开发者打造，购买云+校园任意套餐可
                    免费观看课程视频本课程专为云计算初学者、学生、个人开
                    发者打造，购买云+校园任意套餐可免费观看课程视频本课
                    程专为云计算初学者、学生、个人开发者打造，购买云+校园
                    任意套餐可免费观看课程视频本课程专为云计算初学者、
                    学生、个人开发者打造，购买云+校园任意套餐可免费观
                    看课程视频
                </p>
                <input type="submit" value="开始学习" />
                </div>
                <img src="../day7-25/images/right.png" class="img2" />
            </div>
        </div>
        <div class="db">
            <ul class="u3">
                <li class="l3">
                    腾讯云计算
                    <ul class="u4">
                        <li class="l4">产品</li>
                        <li class="l4">云市场</li>
                        <li class="l4">客户案例</li>
                        <li class="l4">产品发布台</li>
                        <li class="l4">网站备案</li>
                        <li class="l4">认证信息</li>
                        <li class="l4">许可证说明</li>
                        <li class="l4">隐私声明</li>
                        <li class="l4">关于我们</li>
                    </ul>
                </li>
                <li class="l3">
                   解决方案
                    <ul class="u4">
                        <li class="l4">视频</li>
                        <li class="l4">游戏</li>
                        <li class="l4">金融</li>
                        <li class="l4">电商</li>
                        <li class="l4">网站</li>
                        <li class="l4">大数据</li>
                        <li class="l4">人脸核身</li>
                        <li class="l4">在线教育</li>
                        <li class="l4">微信小程序</li>
                        <li class="l4">微信小程序音视频</li>
                    </ul>
                </li>
                <li class="l3">
                    资源与社区
                    <ul class="u4">
                        <li class="l4">免费套餐</li>
                        <li class="l4">入门中心</li>
                        <li class="l4">定价中心</li>
                        <li class="l4">资源中心</li>
                        <li class="l4">腾讯云大学</li>
                        <li class="l4">云+社区</li>
                        <li class="l4">专栏</li>
                        <li class="l4">问答</li>
                        <li class="l4">沙龙</li>
                    </ul>
                </li>
                <li class="l3">
                    合作与生态
                    <ul class="u4">
                        <li class="l4">合作伙伴</li>
                        <li class="l4">合作伙伴学院</li>
                        <li class="l4">推广奖励</li>
                        <li class="l4">云+公益</li>
                        <li class="l4">云+校园</li>
                        <li class="l4">云+创业</li>
                        <li class="l4">Techo 开发者大会</li>
                        <li class="l4">腾讯数字生态大会</li>
                        <li class="l4">云启产业计划</li>
                        <li class="l4">腾讯云启创新基地</li>
                    </ul>
                </li>
                <li class="l3">
                    管理与支持
                    <ul class="u4">
                        <li class="l4">公告</li>
                        <li class="l4">控制台</li>
                        <li class="l4">续费管理</li>
                        <li class="l4">访问管理</li>
                        <li class="l4">安全中心</li>
                        <li class="l4">举报平台</li>
                        <li class="l4">工单管理</li>
                        <li class="l4">联系我们</li>
                    </ul>
                </li>
            </ul>
            <div class="db2">
                <p>Copyright © 2013 - 2020</p>
                <p>Tencent Cloud. All Rights Reserved</p>
                <p>腾讯云 版权所有</p>
                <input type="submit" value="购买咨询" class="in2" />
            </div>
        </div>  
</body>
</html>